<template>
  <view class="main">
    <view class="commonBox">
      <view class="header">
        <view class="left">
          <view>
            <view class="nameBox">
              <view class="title">{{ info?.name }}</view>
              <view class="right" v-if="info?.businessStatus"> {{ businessStatusObj[info?.businessStatus] }} </view>
            </view>
            <view class="labelList">
              <view class="item" v-if="info?.peopleCount">{{ peopleCountObj[info?.peopleCount] }}</view>
            </view>
          </view>
        </view>
        <view class="rightBox">
          <view class="headText" v-if="info?.name">{{ info?.name[0] + info?.name[1] }}</view>
          <!-- <view class="authLabel"><image src="../static/home/yrz.png" mode="scaleToFill" />已认证</view> -->
        </view>
      </view>
      <view class="infoBox">
        <view>
          <view class="title">法定代表人</view>
          <view class="value">{{ info?.legalRepresentative || "未知" }}</view>
        </view>
        <view>
          <view class="title">注册资本</view>
          <view class="value">{{ info?.registeredCapital || "未知" }}</view>
        </view>
        <view>
          <view class="title">成立日期</view>
          <view class="value">{{ info?.createDate || "未知" }}</view>
        </view>
      </view>
      <view class="dzBox">
        <view class="t">公司地址</view>
        <view class="b">{{ info?.address }}</view>
      </view>
    </view>
    <view class="commonBox box">
      <view class="title">所在行业</view>
      <view class="itemBox">
        <view v-for="(i, index) in info?.industryList" class="item" :key="index">{{ i.industryName }}</view>
      </view>
    </view>
    <view class="commonBox box">
      <view class="title">经营范围</view>
      <view class="info"> {{ info?.mainBusiness }} </view>
    </view>
    <view class="commonBox box">
      <view class="title">企业简介</view>
      <view class="info"> {{ info?.introduction }} </view>
    </view>
    <view class="commonBox box">
      <view class="title">公司相册</view>
      <image v-for="(item, index) in info?.fileList" @click.stop="TanPreviewImage(info?.fileList, index)" :key="index" :src="item" mode="scaleToFill" />
    </view>
    <view class="buttomBox">
      <u-button type="primary" @click="goPage(`/pages/myPage/MyBusinessCard/MyBusinessCard?cardId=${info?.userId}&pageType=other`)" color="#1676fc" shape="circle">立即联系</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getInfoFactory } from "@/api/home";
import { onMounted, ref } from "vue";
import { goPage, TanPreviewImage } from "@/utils/commonFn";

const { id } = defineProps<{
  id: string;
}>();
const info = ref<HomeTypes.factoryList>();
const peopleCountObj: any = {
  "1": "0-20人",
  "2": "20-99人",
  "3": "100-499人",
  "4": "500-999人",
  "5": "1000-9999人",
  "6": "10000人以上",
};
const businessStatusObj: any = {
  "1": "存续",
  "2": "在业",
  "3": "吊销",
  "4": "注销",
  "5": "迁入",
  "6": "迁出",
  "7": "停业",
  "8": "清算",
};
onMounted(async () => {
  if (uni.getStorageSync("userInfo").level !== "1") {
    uni.showModal({
      title: "提示",
      cancelText: "返回",
      confirmText: "开通会员",
      content: "您未开通会员，暂时无法查看",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/activateMembership");
        }
        if (res.cancel) {
          uni.switchTab({
            url: "/pages/home/home",
          });
        }
      },
    });
    return;
  }
  const res = await getInfoFactory({ factoryId: id });
  let arr: any = [];
  res.data.fileList.forEach((i: any) => {
    arr.push(i.url);
  });
  res.data.fileList = arr;
  info.value = res.data;
});
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 120rpx;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    width: 70%;
    .nameBox {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 30rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #1e1e1e;
        line-height: 42rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .labelList {
      display: flex;
      align-items: center;
      margin-top: 6rpx;
      .item {
        background: #e7f1fe;
        border-radius: 2rpx;
        font-size: 22rpx;
        font-family: DINPro, DINPro;
        font-weight: 500;
        color: #1676fd;
        line-height: 28rpx;
        margin-right: 10rpx;
        padding: 8rpx 12rpx;
      }
    }
  }
  .headText {
    width: 88rpx;
    height: 88rpx;
    background: #eea138;
    border-radius: 8rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 15rpx;
  }
  .right {
    width: 80rpx;
    border: 2rpx solid #4fcfbb;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #4fcfbb;
    line-height: 34rpx;
    border-radius: 10rpx;
    margin-top: 16rpx;
    margin-bottom: 32rpx;
    text-align: center;
  }
}
.rightBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  .authLabel {
    margin: 0;
  }
}
.infoBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 30rpx 26rpx;
  .title {
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #bebebe;
    line-height: 34rpx;
  }
  .value {
    font-size: 26rpx;
    font-family: DINPro, DINPro;
    font-weight: 400;
    color: #1e1e1e;
    line-height: 46rpx;
  }
}
.dzBox {
  padding-top: 32rpx;
  border-top: 1px solid #f8f8f8;
  .t {
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #1e1e1e;
    line-height: 44rpx;
  }
  .b {
    font-size: 26rpx;
    color: #1e1e1e;
    line-height: 36rpx;
    margin-top: 16rpx;
  }
}
.box {
  .title {
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #1e1e1e;
    line-height: 44rpx;
  }
  .itemBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 26rpx;
    .item {
      background: #f7f7f7;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #1e1e1e;
      line-height: 46rpx;
      padding: 18rpx 38rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }
  .info {
    font-size: 26rpx;
    color: #666669;
    line-height: 52rpx;
    margin-top: 32rpx;
  }
  image {
    width: 622rpx;
    height: 480rpx;
    border-radius: 16rpx;
    margin-top: 32rpx;
  }
}
.btn {
  width: 336rpx;
  height: 80rpx;
  background: #1676fd;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}
</style>
